<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>故障维修</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">

		<!--标准mui.css-->
		<link rel="stylesheet" href="css/mui.min.css">
		<script type="text/javascript" src="js/instascan.min.js"></script>
		<!--App自定义的css-->
		<!--<link rel="stylesheet" type="text/css" href="../css/app.css" />-->
		<style>
			body{
				overflow: hidden;
			}
			 .mui-bar-nav{
				background: #3478D0;
				height: 115px;
			} 
			.mui-title,.mui-action-back{display:block;color:  white; padding-top: 35px;font-size: 35px;} 
			.mui-action-back{margin-top: 20px;}
			#backIcon{font-size: 50px;}
			.contentBody{height: 194px;width:100%; background: #F0F1F1;margin-top: 116px;overflow: auto;}
			#defaultBody{display: flex;align-items: center;}
			#deviceBody{display: relative;}
			#exCircle{
			    margin-top:-84px;
				margin-left: 40px;
			    width: 168px;
			    height: 168px;
			    border-radius: 84px;
			    background-color: white;
			}
			
			#inCircle{
			    margin-top: 11px;
			    margin-left: 11px;      
			    position: absolute;
			    width: 146px;
			    height: 146px;
			    border-radius: 73px;
			    background-color: #4e97de;
			}
			#scanIcon{
				margin-top: 39px;
				margin-left: 39px;   
			}
			.foot{
				height: 120px;
				margin-top: -84px;
				background: white;
			}
			#lanch{
				height:83px;
				width: 256px;
				background: #CBDCF3;
				margin-top: 20px;
				margin-left: 480px;
				position: absolute;
				text-align: center;
				color: white;
				font-size: 35px;
				border-radius: 50px; 
			}
			#lanch > span{
				margin-left: -74px;
				padding-top:29px;
				position: absolute;
				
			}
			.greenDiv{height: 20px;width: 20px;background: #3478D0;float: left;}
			.mui-card-header{height: 50px};
			.serialNoSpan{margin-left: 15px;}
			.removeSpan{color: #118CEC;}
		
			#preview {
			position: fixed;
			top: 0;
			bottom: 0;
			left: 0;
			right: 0;
			min-width: 100%; 
			min-height: 80%;
			margin: auto;
			overflow: auto;
			}
		</style>

	</head>

	<body>
		<div id="scanPage" style="display: none;">
			<video id="preview" style="height: 80%"></video>
			<input type="button" value="关闭摄像头" id="close" style="height:80px">
		</div>
		
		<div id="showPage">
			<header class="mui-bar mui-bar-nav">
				<a id="backIcon" href="index.html" class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
				<h1 class="mui-title" >故障维护</h1>
			</header>
			
			<div class="contentBody" id="defaultBody" style="display: none;">
				<div style="margin: auto;" >
					<img src="img/panshi/default.png" style="width: 155px;height: 126px;margin-bottom: 20px;margin-top:-220px">
					<div><span style="color: #b8b8b8;font-size: 30px;margin-left:-30px;">请扫码添加设备</span></div>
				</div>
			</div>
			
			<div class="contentBody" id="deviceBody" >
				
				<div style="height: 33px;margin-top:20px;margin-left:18px;font-size: 30px; ">
					<span >设备列表<span>
				</div>
			</div>
			
			<div id="exCircle" >
				<div id="inCircle">
					<img id="scanIcon" src="img/panshi/scan.jpg">
				</div>
			</div>
			
			<div class = "foot">
				<div id="lanch"><span >发起工单</span></div>
			</div>
			
			</div>
		</div>
		<script src="js/jquery-1.7.1.min.js"></script>
		<script src="js/mui.min.js"></script>
		<script type="text/javascript" charset="utf-8">
			//mui初始化
			mui.init({
				swipeBack: true //启用右滑关闭功能
			});
			
			function getUrlParam(name) {
			            var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
			            var r = window.location.search.substr(1).match(reg);  //匹配目标参数
			            if (r != null) return unescape(r[2]); return null; //返回参数值
			 }
			var scanner = null;	
				
				
			document.getElementById("exCircle").addEventListener('tap', function() {
				document.querySelector("#showPage").style.display = "none";
				document.querySelector("#scanPage").style.display = "block";
				scanner = new Instascan.Scanner({
				    video: document.getElementById('preview'),
				    mirror: false
				});
				
				scanner.addListener('scan', function(content) {
				    if (isValidQr(content)) {
				        window.location.replace(content);
				    }
					// scanner.stop();
				});
				
				document.getElementById("close").addEventListener('tap', function() {
					if(scanner){
						scanner.stop();
						scanner = null;
					}
					document.querySelector("#showPage").style.display = "block";
					document.querySelector("#scanPage").style.display = "none";
					fillBody();
				});
				
				Instascan.Camera.getCameras().then(function(cameras) {
				    if (cameras.length > 0) {
				        if (cameras.length == 2) {
				            scanner.start(cameras[1]);
				        } else {
				            scanner.start(cameras[0]);
				        }
				    } else {
						mui.alert('未找到摄像头', '欢迎使用扫码功能', function() {
						}); 
				    }
				}).catch(function(e) {
					mui.alert('e', '欢迎使用扫码功能', function() {
					}); 
				});
			});
			
			
			window.onload = function(){
				var targetW = 750;
				var scale = document.documentElement.clientWidth / targetW;
				var meta = document.querySelector("meta[name='viewport']");
				meta.content = "width=device-width,initial-scale=" + scale + 
				",maximum-scale=" + scale +
				",minimum-scale=" + scale +
				",user-scalable=no" ;  
				
				var styleNode = document.createElement("style");
				var bodyHeight = document.documentElement.clientHeight - (115+120);
				styleNode.innerHTML = ".contentBody{height: "+ bodyHeight + "px;}";
				document.head.appendChild(styleNode);
			}
			
			
			var devices = [
			];
			
			function fillBody(){
				var defaultBody = document.querySelector("#defaultBody");
				var deviceBody = document.querySelector("#deviceBody");
				var lanch = document.querySelector("#lanch");
				if(devices.length == 0){ 
					defaultBody.style.display = "flex";
					deviceBody.style.display = "none";
					lanch.style.background = "#CBDCF3";
					
				}else{
					defaultBody.style.display = "none";
			
					lanch.style.background = "#118cEC";
					$(".mui-card").remove();
					
					deviceBody.style.display = "block";
					for(var i=0;i<devices.length;i++){
						var divNode = document.createElement("div");
						var device = devices[i] ;
						var deviceJson = device;
						divNode.className = "mui-card";
						divNode.innerHTML += '<div class="mui-card-header">  <div><div class="greenDiv"></div> <span class="serialNoSpan">设备编号:' + deviceJson.serialNo + '</span></div>  <span class="removeSpan" id="' +deviceJson.serialNo +'">移除<span></div>';
						
						
						divNode.innerHTML += 
						'<div class="mui-card-content">'
							+'<div class="mui-card-content-inner">'
								+ '<div style="float:left;width:420px;"><span>机房编号：' + deviceJson.roomNo + '</span></div >' +  '<div style="float:left;padding-left:130px;width:280px;"><span>机架编号：'+ deviceJson.rackNo+'</span></div><BR/>' 
								+ '<div style="float:left;width:420px;"><span>设备厂商：' + deviceJson.manufacturer + '</span></div >' +  '<div style="float:left;padding-left:130px;width:280px;padding-right:0px"><span>设备类型：'+ deviceJson.typeNo+'</span></div><BR/>'  						
							+'</div>'
						+'</div>';
						deviceBody.appendChild(divNode);
						
						document.getElementById(deviceJson.serialNo).addEventListener('tap', function() {
							for(var index=0;index<devices.length;index++){
								var deviceNewJson = devices[index];
								if(deviceNewJson.serialNo === this.id){
									devices.splice(index,1);
									break;
								}
							}	
							fillBody();
						});
					}
				}
				
				
			}
			
			
			fillBody();
			
			document.getElementById("lanch").addEventListener('tap', function() {	
				if(devices.length ==0){
					mui.alert("请扫描设备", '欢迎使用工单功能', function() {
					});
					return;
				}
				$.ajax({
				  url: "http://localhost:8888/device/fix",
				  type:"POST",
				  data: JSON.stringify(devices)   ,
				  contentType: "application/json;charsetset=UTF-8",
				  success: function(data){
					  console.log(typeof(data));
					  var a = JSON.stringify(data);
					  var b = JSON.parse(a);
					  console.log(b[0]);
					  var url = "panshi-done.html?resp="+ encodeURI(encodeURI(JSON.stringify(data))) ;
					  console.log(url);
					  window.location.href = url;
				  },
				  error: function(){
				  		mui.alert("工单发起失败", '欢迎发起工单', function() {
				  		});			 
				  }
				  });
			});
			
			
			const isValidQr = (string) => {
			   var json = JSON.parse(string);
			   if(json.serialNo && json.roomNo && json.rackNo && json.manufacturer && json.typeNo){
				   var exist = false;
				   for(var index in devices){
					   if(devices[index].serialNo === json.serialNo){
						   mui.alert('【' + json.serialNo + '】已存在', '添加失败', function() {
						   });
						   exist = true;
						   break;
					   }
				   }
				   if(!exist){
					   mui.alert('添加 【' + json.serialNo + '】成功', '欢迎使用扫码功能', function() {
					   });
					   devices.push(json);
				   }
			   }
			   else{
				  mui.alert("【" + string + '】格式错误', '欢迎使用扫码功能', function() {
				  }); 
			   }
			    return false;
			}
			
			
			
		</script>
	</body>

</html>